<#include "include/_meta.html">
    <title>租车登记</title>
</head>
<body>
<article class="page-container">
<div id="firstRegist" name="firstRegist">
    <form>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>客户手机:</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="客户手机" id="mobile" name="mobile">
            </div>
        </div>
        <div class="row cl" style="display:none">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>客户id:</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" autocomplete="off" value="" placeholder="客户id" id="uid" name="uid">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>客户姓名:</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" autocomplete="off" value="" placeholder="客户姓名" id="name" name="name">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>身份证号:</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" autocomplete="off" value="" placeholder="身份证号" id="idcard" name="idcard">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>驾驶证号：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" autocomplete="off" value="" placeholder="驾驶证号" id="drivernum" name="drivernum"></div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>我是企业:</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="checkbox" name="mycheck" onclick="fun_check()"/></div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>上传营业执照:</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="" id="busilicense" name="busilicense">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>缩略图：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <div class="uploader-thum-container" id="fileQueued" >
                    <div id="fileList" class="uploader-list"></div>
                    <div id="filePicker">选择图片</div>
                </div>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>企业编号：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="" id="cid" name="cid">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>机构代码：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="机构代码" name="orgcode" id="orgcode">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>税务证号：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="税务证号" name="taxcertno" id="taxcertno">
            </div>
        </div>
        <div class="row cl" style="margin-left:700px;">
            <a id="addClient" class='className' href="javascript:hideFirst()">下一步</a>
        </div>
    </form>

</div>

<div id="secondRegist" name="secondRegist" style="display:none">
    <form>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>客户手机:</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="客户手机" id="mobile" name="mobile">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>取车门店：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <select id="getdept" style="width:200px;height:30px;font-size:16px;background-color:#E1E1E1;"><option select="selected" value="请选择门店">请选择门店</option></select>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>还车门店：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <select id="backdept" style="width:200px;height:30px;font-size:16px;background-color:#E1E1E1;"><option select="selected" value="请选择门店">请选择门店</option></select>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>预计取车时间</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" id="readybttime" onfocus="WdatePicker({minDate:'%y-%M-#(%d+1)'})" class="input-text Wdate">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>预计还车时间</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" onfocus="WdatePicker({minDate: '#F{$dp.$D(\'readybttime\')}'})" id="readettime" class="input-text Wdate">
            </div>
        </div>
        <div class="row cl" style="margin-left:700px;">
            <a  class='className' href="javascript:showLast()">去订车</a>
        </div>
    </form>

    <!--第2块div隐藏结束-->
</div>
</article>

<!--点击去订车把下边的div显示出来---------------------------------------------->
<!--第三块div隐藏开始-->
<div style="display:none" id="carlist" name="carlist">
    <div class="row cl">
        <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>客户手机:</label>
        <div class="formControls col-xs-8 col-sm-9">
            <input type="text" class="input-text" value="" placeholder="客户手机" id="mobile" name="mobile">
        </div>
    </div>
    <table id="carListTable" class="table table-border table-bordered table-bg table-hover">
        <thead>
        <tr class="text-c">
            <th width="150">品牌型号</th>
            <th width="150">手动自动</th>
            <th width="150">排量大小</th>
            <th width="150">外观类型</th>
            <th width="150">日租金</th>
            <th width="150">操作</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
<!--第三块div隐藏结束-->

<!-- 第四个div开始-->
<div style="display:none;float:left;width:1663px;" id="orderListTable"  class="cl pd-5 bg-1 bk-gray mt-20">
    <div style="float: left;width:800px;margin-left:200px;">
        <table  height="400" class="cl pd-5 bg-1 bk-gray" style="text-align:center;border:1px #E1E1E1 solid" id="carInfoTable">
            <tr >
                <td class="realrent" colspan="2" rowspan="2"><img src="#" alt="汽车图片"/></td>
                <td style="font-size:16px;border:1px #E1E1E1 solid">车辆类型：</td>
                <td style="font-size:14px;border:1px #E1E1E1 solid"><span class="realrent"></span></td>
                <td style="font-size:16px;border:1px #E1E1E1 solid">车辆配置：</td>
                <td style="font-size:14px;border:1px #E1E1E1 solid"><span class="realrent"></span></td>
            </tr>
            <tr>
                <td style="font-size:16px;border:1px #E1E1E1 solid">取车门店：</td>
                <td style="font-size:14px;border:1px #E1E1E1 solid"><span class="realrent"></span></td>
                <td style="font-size:16px;border:1px #E1E1E1 solid">还车门店：</td>
                <td style="font-size:14px;border:1px #E1E1E1 solid"><span class="realrent"></span></td>
            </tr>
            <tr>

                <td style="font-size:16px;border:1px #E1E1E1 solid">取车时间：</td>
                <td colspan="2" style="font-size:14px;border:1px #E1E1E1 solid"><span class="realrent"></span></td>
                <td style="font-size:16px;border:1px #E1E1E1 solid">还车时间：</td>
                <td colspan="2" style="font-size:14px;border:1px #E1E1E1 solid"><span class="realrent"></span></td>
            </tr>
            <tr>
                <td style="font-size:16px;border:1px #E1E1E1 solid">详细地址：</td>
                <td colspan="2" style="font-size:14px;border:1px #E1E1E1 solid"><span class="realrent"></span></td>
                <td style="font-size:16px;border:1px #E1E1E1 solid">详细地址：</td>
                <td colspan="2" style="font-size:14px;border:1px #E1E1E1 solid"><span class="realrent"></span></td>
            </tr>
            <tr>
                <td style="font-size:16px;border:1px #E1E1E1 solid">租期：</td>
                <td style="font-size:14px;"><span class="realrent"></span></td>
                <td colspan="4"></td>
            </tr>
        </table>
    </div>
    <div style="float: left;width:250px;margin-left:20px;">
        <table id="priceTable" height="400" style="text-align:center;border:1px #E1E1E1 solid">
            <tr>
                <td colspan="2" style="font-size:20px;border:1px #E1E1E1 solid"><b>费用明细</b></td>
            </tr>
            <tr>
                <td style="font-size:16px;width:100px;border:1px #E1E1E1 solid">租赁费用:</td>
                <td style="width:150px;font-size:14px;border:1px #E1E1E1 solid"><span class="realrent" >xxx花园路店43</span></td>
            </tr>
            <tr>
                <td style="font-size:16px;width:100px;border:1px #E1E1E1 solid">基本保险：</td>
                <td style="width:150px;font-size:14px;border:1px #E1E1E1 solid"><span class="realrent" >xxx花园路店43</span></td>
            </tr>
            <tr>
                <td style="font-size:16px;width:100px;border:1px #E1E1E1 solid">订单总额：</td>
                <td style="width:150px;font-size:14px;border:1px #E1E1E1 solid"><span class="realrent" >xxx花园路店43</span></td>
            </tr>
            <tr  style="display:none">
                <td>carid:</td>
                <td><span class="realrent">carid</span></td>
            </tr>
            <!--提交订单时，将数据分别插入客户信息表t_clientuser，客户信息企业表t_cliencompany，订单表t_carorder-->
            <tr>
                <td colspan="2"><a class='className' href="javascript:submitThree()">提交订单</a></td>

            </tr>

        </table>
    </div>
</div>

<#include "include/_footer.html">
<script type="text/javascript" src="../static/lib/webuploader/0.1.5/webuploader.js"></script>

<script type="text/javascript">
    //-----图片加载-------------------------------------
    $(function(){
        var uploader = WebUploader.create({
            auto: true,
            swf: 'lib/webuploader/0.1.5/Uploader.swf',
            server: '/uploadFile',
            pick: '#filePicker',
            fileVal:'uploadfile',
            resize: false,
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }

        });
        uploader.on('fileQueued',function(file) {
            //alert(file.name);
            $("#busilicense").attr("value","images/"+file.name);
        });
    });
    function hideFirst(){
        //将第一个div隐藏，第二个div显示
        $('#firstRegist').css("display","none");
        $('#secondRegist').css("display","block");
        $.ajax({
            type: "get",
            url:"/getDept",
            success:function(d){
                console.log(d);
                $(d.deptList).each(function(i){
                    $("#getdept").append("<option value="+d.deptList[i].deptname+">"+d.deptList[i].deptname+"</option>");
                    $("#backdept").append("<option value="+d.deptList[i].deptname+">"+d.deptList[i].deptname+"</option>");
                });
            }
        });
    }
    /*点击事件将第三个div显示,隐藏第二个div*/
    function showLast(){
        /*先判断有没有选择门店等信息*/
        if($('#getdept').val()=='请选择门店' || $('#backdept').val()=='请选择门店'){
            layer.msg('请选择取车门店或还车门店',{icon: 5,time:1000});
            return;
        }
        /*判断取车时间，还车时间
        if($('readybttime').val()==null || $('readettime').val()==null){
                layer.msg('请选择取车时间或还车时间',{icon: 5,time:1000});
                return;
            }*/
        $('#secondRegist').css("display","none");
        $('#carlist').css("display","block");
//点击去订车，查询车辆列表信息
        $('#carListTable').dataTable( {

            "processing": false,
            "serverSide": true,
            "bSort": false,
            "bFilter":false,
            "bLengthChange":false,
            "iDisplayLength":10,
            "bRetrieve":true,
            //不需要传递参数，查询全部数据
            "ajax": {
                "url": "/goToOrder",
                "type": "get"
            },
            "columns": [

                { "data": "carbrandtype" },
                { "data": "" },
                { "data": "enginesize" },
                { "data": "facetype" },
                { "data": "dayprice" },
                { "data": "" }
            ],
            "columnDefs": [
                {
                    "targets": [1],
                    "data": "id",
                    "render": function(data, type, full) {
                        if(full.isauto=="1")
                            return "自动";
                        if(full.isauto=="0")
                            return "手动";
                    }
                },
                {
                    "targets": [5],
                    "data": "id",
                    "render": function(data, type, full) {
                        return "<a href=\"javascript:void(0); \" onclick=\"showOrder('"+full.carid+"')\"><span style=\"color:blue\">订购</span></a>";
                        //return full.id+"";
                    }
                }
            ],
            "fnRowCallback" : function(nRow, aData, iDisplayIndex) {
                nRow.className="text-c";
                return nRow;
            },
            "fnDrawCallback": function(oSettings) {
                //获取后台方式 直接可以拿到json 之后进行处理
                var json=jQuery.parseJSON(oSettings.jqXHR.responseText);
                $("#pageTotal").html(json.recordsTotal);
            }
        });
    }
    //点击订购，将订单信息显示，第三个div隐藏，显示第四个div
    function showOrder(carid){
        $('#carlist').css("display","none");
        $('#orderListTable').css("display","block");
        $.ajax({
            type: "get",
            url: "/getCar" ,
            dataType:"json",
            data:{
                "carId" : carid,
                "getDept":$("#getdept").val(),
                "backDept":$('#backdept').val()
            },
            success:function(d){
                /*计算日期时间差*/
                var date1 = new Date($('#readybttime').val());
                var date2 = new Date($('#readettime').val());
                var s1 = date1.getTime(),s2 = date2.getTime();
                var total = (s2 - s1)/1000;
                var day = parseInt(total / (24*60*60));
                //把返回数据转换成json格式,将信息展示到最后一个页面
                var json=eval(d);
                //each遍历json数组,index是索引,domEle是当前节点
                $.each(json,function(index,domEle){
                    $('.realrent').eq(0).text("tupian ");//
                    $('.realrent').eq(1).text(json[index].facetype+"&nbsp"+json[index].cartype+"&nbsp"+json[index].carbrandtype);//车辆类型
                    $('.realrent').eq(2).text(json[index].isauto+"/"+json[index].enginesize+"/"+json[index].seatnum);//车辆配置
                    $('.realrent').eq(3).text($("#getdept").val());//取车门店
                    $('.realrent').eq(4).text($('#backdept').val());//还车门店
                    $('.realrent').eq(5).text($('#readybttime').val());//预计取车时间
                    $('.realrent').eq(6).text($('#readettime').val());//预计还车时间
                    $('.realrent').eq(7).text(json[index].getdeptAddress);//需要的话，到门店信息表里查询
                    $('.realrent').eq(8).text(json[index].backdeptAddress);//需要的话，到门店信息表里查询
                    $('.realrent').eq(9).text(day);
                    $('.realrent').eq(10).text(json[index].dayprice*day); //租赁费用
                    $('.realrent').eq(11).text(json[index].basicinsure);
                    $('.realrent').eq(12).text(json[index].dayprice*day + json[index].basicinsure); //总金额
                    $('.realrent').eq(13).text(json[index].carid);  //将carid存放在隐藏的tr行中
                });
            }
        });
    }
    //提交订单时，将数据分别插入客户信息表t_clientuser，客户信息企业表t_cliencompany，订单表t_carorder
    function submitThree(){
        //将所有数据一起传过去，在服务器端对数据进行分类
        $.ajax({
            type: "post",
            url: "/addClient" ,
            data:{
                "mobile" : $('#mobile').val(),			//客户电话
                "name" : $('#name').val(),				//客户名字
                "idcard" : $('#idcard').val(), 			//客户身份证
                "drivernum" : $('#drivernum').val(),	//客户驾驶证号
                "busilicense" : $('#busilicense').val(),//营业执照     图片地址
                "cid" : $('#cid').val(),				//企业编号
                "orgcode" : $('#orgcode').val(),		//机构代码
                "taxcertno":$('#taxcertno').val(),		//税务证号
                //--------------------------------------------------
                "shouldrent" : $('.realrent').eq(10).html(),	//租赁费用
                "shouldtotal" : $('.realrent').eq(12).html(),	//订单总额
                "carid" : $('.realrent').eq(13).html(),//车辆编号
                "basicinsure" : $('.realrent').eq(11).html(),	//基本保险
                "btrentdept" : $('#getdept').val(),		//取车门店
                "etrentdept" : $('#backdept').val(),	//还车门店
                "readybttime" : $('#readybttime').val(),	//预计取车时间
                "readettime" : $('#readettime').val()		//预计还车时间
            },
            success:alert("提交订单成功！！")
        });

    }
    //-------------------------------------------
    var datadel = function(){

        //判断选择项是否为空
        var checkedNum = $("input[name='caritem']:checked").length;
        if(checkedNum==0){
            layer.msg('请选中要删除的列表项!',{icon: 5,time:1000});
            return;
        }
        //获取选择项的值
        var checkedVal = "";
        $("input[name='caritem']:checked").each(function(){
            checkedVal+=$(this).val()+",";
        });

        var itemsTipStr = "这条记录";
        if(checkedNum>1){
            itemsTipStr = "这些选项";
        }

        layer.confirm('确认要删除'+itemsTipStr+'吗？',function(){

            //此处请求后台程序，下方是成功后的前台处理……
            $.ajax({
                type: "POST",
                url: "/delUsers",
                data: "usersid="+checkedVal,
                success: function(msg){

                    layer.msg('已删除!',{icon: 5,time:1000});

                    $("#userListTable").dataTable().fnClearTable();
                    initTable();
                }
            });



        });


    }

</script>

</body>